<template>
  <el-dialog 
    class="score-group-dialog"
    :top="dish == 3 ? '15%' : '7%'"
    v-bind:class="{three:glength ==3, five: glength==5 }"
    :visible.sync="visible"
    :title="title"
    :before-close="handleClose">
    <el-row class="game-title">
      <el-col :span="4" :offset="7" class="team-name">
        <span class="host-icon">主</span>{{isRead ? detail.hostTeam : myData.hostTeam}}
      </el-col>
      <el-col :span="2" class="team-name">
        VS
      </el-col>
      <el-col :span="4" class="team-name">
        {{isRead ? detail.guestTeam : myData.guestTeam}}
      </el-col>
    </el-row>
    <!--录入比分-->
    <div class="score-group-box clearfix" v-if="!isRead">
      <div class="score-left">
        <ul class="score-table">
          <li>项目</li>
          <li>成员姓名</li>
          <li class="clearfix" v-bind:style="{height:sHeight +'px'}">
            <div class="fl every" v-bind:style="{lineHeight: sHeight +'px'}">
              每盘比分
            </div>
            <ul class="fl number">
              <li v-for="(item,index) in dish" :key="index">
                {{index+1}}
              </li>
            </ul>
          </li>
          <li style="height:61px;">每场结果</li>
          <li style="height:62px;">总比分</li>
        </ul>
      </div>
      <div class="score-right">
        <ul class="score-table clearfix">
          <ul v-for="(item,index) in game" :key="item.game" class="game-item" v-bind:class="{noBorder: index==game.length-1}">
            <li class="project-name">
              第{{index+1 |NumbToChinese}}场 {{item.game}}
            </li>
            <li class="game-player">
              <template v-if="item.hostName.indexOf('&') == -1">
                <el-row>
                  <el-col :span="10" class="relative hidden">
                    <span class="host-icon double-player">主</span>
                    <span :title="item.hostName">{{item.hostName}}</span>
                  </el-col>
                  <el-col :span="4">
                    VS 
                  </el-col>
                  <el-col :span="10" class="hidden">
                    <span :title="item.guestName">{{item.guestName}}</span>
                  </el-col>
                </el-row>
              </template>
              <template v-else>
                <el-row>
                  <el-col :span="10">                    
                    <div class="relative">
                      <span class="host-icon double-player">主</span>
                      <p class="host-name hidden">
                        <span :title="item.hostName.split('&')[0]">{{item.hostName.split('&')[0]}}</span>                        
                      </p>
                      <p class="host-name hidden">
                        <span :title="item.hostName.split('&')[1]">{{item.hostName.split('&')[1]}}</span>
                      </p>
                    </div>
                  </el-col>
                  <el-col :span="4">VS</el-col>
                  <el-col :span="10">
                    <div class="relative">
                      <p class="host-name hidden guest">
                        <span :title="item.guestName.split('&')[0]">{{item.guestName.split('&')[0]}}</span>
                      </p>
                      <p class="host-name hidden guest">
                        <span :title="item.guestName.split('&')[1]">{{item.guestName.split('&')[1]}}</span>
                      </p>
                    </div>
                  </el-col>
                </el-row>
              </template>
            </li>
            <li v-for="(ju,$index) in item.score" :key="$index">
              <el-row>
                <el-col :span="8" :offset="3">
                  <el-input :min="0" @blur="calcScore(index, ju, 1)" :maxlength="2" v-model="ju.hostScore"/>
                </el-col>
                <el-col :span="2">: </el-col>
                <el-col :span="8" >
                  <el-input :min="0" @blur="calcScore(index, ju, 0)" :maxlength="2" v-model="ju.guestScore"/>
                </el-col>
              </el-row>              
            </li>
            <li>
              {{item.hostScore}}:{{item.guestScore}}
            </li>            
          </ul>
        </ul>
        <div class="total-score">
          {{hostScore}}:{{guestScore}}
        </div>
      </div>
    </div>
    <!--查看比分-->
    <div class="score-group-box clearfix" v-else>
      <div class="score-left">
        <ul class="score-table">
          <li>项目</li>
          <li>成员姓名</li>
          <li class="clearfix" v-bind:style="{height:sHeight +'px'}">
            <div class="fl every" v-bind:style="{lineHeight: sHeight +'px'}">
              每盘比分
            </div>
            <ul class="fl number">
              <li v-for="(item,index) in dish" :key="index">
                {{index+1}}
              </li>
            </ul>
          </li>
          <li style="height:61px;">每场结果</li>
          <li style="height:62px;">总比分</li>
        </ul>
      </div>
      <div class="score-right">
        <ul class="score-table clearfix">
          <ul v-for="(item,index) in detail.scoreList" :key="item.roundTypeDesc" class="game-item" v-bind:class="{noBorder: index==detail.scoreList.length-1}">
            <li class="project-name">
              第{{index+1 |NumbToChinese}}场 {{item.roundTypeDesc}}
            </li>
            <li class="game-player">
              <template v-if="item.hostUserName.indexOf('&') == -1">
                <el-row>
                  <el-col :span="10" class="relative hidden">
                    <span class="host-icon double-player">主</span>
                    <span :title="item.hostUserName">{{item.hostUserName}}</span>
                  </el-col>
                  <el-col :span="4">
                    VS
                  </el-col>
                  <el-col :span="10" class="hidden">
                    <span :title="item.guestUserName">{{item.guestUserName}}</span>
                  </el-col>
                </el-row>                  
              </template>
              <template v-else>
                <el-row>
                  <el-col :span="10">                    
                    <div class="relative">
                      <span class="host-icon double-player">主</span>
                      <p class="host-name hidden">
                        <span :title="item.hostUserName.split('&')[0]">{{item.hostUserName.split('&')[0]}}</span></p>
                      <p class="host-name hidden">
                        <span :title="item.hostUserName.split('&')[1]">{{item.hostUserName.split('&')[1]}}</span></p>
                    </div>
                  </el-col>
                  <el-col :span="4">VS</el-col>
                  <el-col :span="10">
                    <div class="relative">
                      <p class="host-name hidden guest">
                        <span :title="item.guestUserName.split('&')[0]">{{item.guestUserName.split('&')[0]}}</span></p>
                      <p class="host-name hidden guest">
                        <span :title="item.guestUserName.split('&')[1]">{{item.guestUserName.split('&')[1]}}</span></p>
                    </div>
                  </el-col>
                </el-row>
              </template>
            </li>
            <li v-for="(ju,$index) in item.smallScoreScanVO" :key="$index">
              <template v-if="ju.hostScore || ju.guestScore">
                {{ju.hostScore}}:{{ju.guestScore}}
              </template>
              <template v-else>
                /
              </template>
            </li>
            <li>
              {{item.hostScore}}:{{item.guestScore}}
            </li>            
          </ul>
        </ul>
        <div class="total-score">
          {{detail.hostScore}}:{{detail.guestScore}}
        </div>
      </div>
    </div>
    <span slot="footer" class="dialog-footer center">
      <template v-if="isRead">
        <el-button type="primary" @click="handleCancel()">确 认</el-button>
      </template>
      <template v-else>
        <el-button type="primary" @click="scoreWrite()" :disabled="!scoreRight">确 认</el-button>
        <el-button @click="handleCancel()">取 消</el-button>
      </template>
    </span>         
  </el-dialog>
</template>

<script>
import {filterNum} from 'utils'
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    data: Object,
    detail: Object,
    isRead: {
      type: Boolean
    }
  },
  components: {
  },
  computed: {
    title () {
      return this.isRead ? '比分详情' : '录入比分'
    },
    glength () {
      return this.isRead ? this.detail.scoreList.length : this.game.length
    },
    dish () {
      return this.isRead ? this.detail.dish : this.data.dish
    },
    winDish () {
      return (this.dish + 1) / 2
    },
    sHeight () {
      let h
      if (this.dish === 3) {
        h = 183
      } else if (this.dish === 5) {
        h = 305
      } else if (this.dish === 7) {
        h = 427
      }
      return h
    },
    hostScore () {
      let result = 0
      for (let m = 0, len = this.game.length; m < len; m++) {
        if (this.game[m].hostScore > this.game[m].guestScore && this.game[m].hostScore >= this.winDish) {
          result++
        }
      }
      return result
    },
    guestScore () {
      let result = 0
      for (let m = 0, len = this.game.length; m < len; m++) {
        if (this.game[m].hostScore < this.game[m].guestScore && this.game[m].guestScore >= this.winDish) { // 每盘比分大于胜利盘数
          result++
        }
      }
      return result
    },
    scoreRight () {
      let totalScore = 0
      this.game.forEach(item => {
        let score = item.score
        let hostWin = 0
        let guestWin = 0
        score.forEach(dish => { // 遍历每局比分
          if ((dish.hostScore !== dish.guestScore) &&
          (Number(dish.hostScore) >= 0 && Number(dish.guestScore) >= 0) && dish.hostScore.length && dish.guestScore.length) { // 比分输入完整且每局比分符合要求
            if (dish.hostScore >= this.data.point && Number(dish.hostScore) > Number(dish.guestScore)) {
              hostWin++
            } else if (dish.guestScore >= this.data.point && Number(dish.hostScore) < Number(dish.guestScore)) {
              guestWin++
            }
          }
        })
        if (hostWin >= this.winDish || guestWin >= this.winDish) {
          totalScore++
        }
      })
      let everyOK = this.game.every(item => { // 要么每场比分符合胜出的规则，要么每场比分每盘都未输入
        return (item.hostScore >= this.winDish || item.guestScore >= this.winDish) ||
        ((item.hostScore === 0 && item.guestScore === 0))
      })
      return totalScore >= (this.game.length + 1) / 2 && everyOK
    }
  },
  created () {
    // this.initData()
  },
  mounted () {
    if (!this.isRead) {
      this.initData()
    } else {
      this.initShowData()
    }
  },
  data () {
    let myData = this.data
    return {
      game: [],
      showData: [],
      myData: myData
    }
  },
  methods: {
    // field :场次
    calcScore (field, item, isHost) {
      let h = 0
      let g = 0
      let re = /[^0-9]/
      if (isHost && re.test(item.hostScore)) {
        item.hostScore = filterNum(item.hostScore)
      }
      if (!isHost && re.test(item.guestScore)) {
        item.guestScore = filterNum(item.guestScore)
      }
      for (let i = 0, len = this.game[field].score.length; i < len; i++) {
        if (Number(this.game[field].score[i].hostScore) > Number(this.game[field].score[i].guestScore)) {
          h++
        } else if (Number(this.game[field].score[i].hostScore) < Number(this.game[field].score[i].guestScore)) {
          g++
        }
      }
      this.game[field].hostScore = h
      this.game[field].guestScore = g
    },
    initData () {
      let game = []
      let sequence = this.myData.sequence
      for (let m = 0; m < sequence.length; m++) {
        let score = []
        for (let i = 0; i < this.myData.dish; i++) {
          score.push({
            hostScore: '',
            guestScore: '',
            scoreSort: i + 1
          })
        }
        game.push({
          hostUserId: sequence[m].hostUserId,
          guestUserId: sequence[m].guestUserId,
          roundType: sequence[m].roundType,
          game: sequence[m].gameName,
          hostName: sequence[m].hostName,
          guestName: sequence[m].guestName,
          score: score,
          hostScore: 0,
          guestScore: 0
        })
      }
      this.game = game
    },
    initShowData () {
      for (let m = 0; m < this.detail.scoreList.length; m++) {
        let ss = this.detail.scoreList[m].smallScoreScanVO
        let sl = ss.length
        if (sl < this.detail.dish) {
          for (let g = 0; g < this.detail.dish - sl; g++) {
            ss.push('/')
          }
        }
      }
    },
    scoreWrite () {
      let allGame = this.game.length + 1
      if (this.hostScore * 2 < allGame && this.guestScore * 2 < allGame) {
        this.$message.error('您输入的场数不符合要求！')
        return
      }
      for (let i = 0, l = this.game.length; i < l; i++) {
        let score = this.game[i].score
        for (let j = 0, len = score.length; j < len; j++) {
          if ((!score[j].hostScore.length && score[j].guestScore.length) ||
          (score[j].hostScore.length && !score[j].guestScore.length) ||
          ((score[j].hostScore.length && Number(score[j].hostScore) < this.data.point) &&
          (score[j].guestScore.length && Number(score[j].guestScore) < this.data.point)) ||
          (score[j].hostScore === score[j].guestScore && (score[j].hostScore.length))) {
            this.$message.error('您输入的比分不符合要求！')
            return
          }
        }
      }

      let result = {
        id: this.data.id,
        hostScore: this.hostScore,
        guestScore: this.guestScore,
        scoreSiteVO: []
      }
      let scoreVO = []
      for (let i = 0, l = this.game.length; i < l; i++) {
        let scoreGame = []
        let ss = this.game[i].score
        for (let m = 0, len = this.game[i].score.length; m < len; m++) {
          if (ss[m].hostScore.length && ss[m].guestScore.length) {
            scoreGame.push({
              hostScore: Number(ss[m].hostScore),
              guestScore: Number(ss[m].guestScore),
              scoreSort: ss[m].scoreSort
            })
          }
        }
        scoreVO.push({
          hostUserId: this.game[i].hostUserId,
          guestUserId: this.game[i].guestUserId,
          hostScore: this.game[i].hostScore,
          guestScore: this.game[i].guestScore,
          roundType: this.game[i].roundType,
          scoreGameVO: scoreGame,
          scoreSort: i + 1
        })
      }
      result.scoreSiteVO = scoreVO
      this.$emit('score', result)
    },
    handleCancel () {
      this.$emit('close')
    },
    handleClose () {
      if (this.visible) {
        this.$emit('update:visible', false) // 更新父组件的状态
        this.$emit('close')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.game-title{
  line-height:20px;
  margin-bottom: 30px;
}
.score-left{
  li{
    text-align:center;
  }
}
.score-right{
  color: #333;
  li{
    text-align:center;
    height: 61px;
  }
}
.game-item{
  float: left;
  width: 193px;
  border-right: 1px solid #b5b1b1;
  .game-player{
    line-height: 40px;
    padding: 10px 5px;
  }
  .player-name{
    line-height: 20px;
    height: 20px;
    display:inline-block;
  }
  .double-player{
    position: absolute;
    left: 0;
    top: 13px;
  }
  .host-name{
    line-height: 20px;
    padding-left: 12px;
    &.guest{
      padding-left: 0;
    }
  }
  
}
.total-score{
  border-top: 1px solid #eee;
  width:100%;
  height:62px;
  text-align: center;
  line-height: 60px;
  color:#ff5b02;
  font-weight: 700;
}
</style>
<style lang="scss" scoped>
@import '../../../styles/scoreGroup.scss';
.noBorder{
  border-right: 0!important;
}
.team-name{
  font-size:18px; 
  color:#333;
  font-weight: 700;
}
.host-icon{
  background: #00bb90;
  color:#fff;
  width:14px;
  height: 14px;
  line-height:14px;
  display: inline-block;
  font-size:12px;
  text-align:center;
}
.game-item li:last-child{
  font-weight: 700;
}
.game-item{
  .el-input-number{
    width: 100%;
  }
}
</style>
<style lang="scss">
.score-group-dialog.three{
  .el-dialog{
    width:813px;
  }
}
.score-group-dialog.five{
  .el-dialog{
    width:1200px;
  }
}
.score-group-dialog{
  .el-dialog__body{
    padding:30px 42px;
  }
  .project-name{
    font-size: 14px;
    font-weight: 700;
    color:#333;
  }
}
</style>
